<template>
  <div class="app-container">
    <van-nav-bar :title="'报名信息'" left-arrow @click-left="$router.back()" />
    <div class="content-box form" v-loading="dataLoading">
      <div class="form-box">
        <el-form ref="formRef" class="form" :model="form" :rules="formRules" label-width="82px" label-position="left">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" :spellcheck="false"
              :readonly="[0, 2].includes(competitionStatus)" />
          </el-form-item>
          <!-- <el-form-item label="性别" prop="gender">
            <el-radio v-model="form.gender" label="男">男</el-radio>
            <el-radio v-model="form.gender" label="女">女</el-radio>
          </el-form-item> -->
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入身份证号" :spellcheck="false"
              :readonly="[0, 2].includes(competitionStatus)" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号码" :spellcheck="false"
              :readonly="[0, 2].includes(competitionStatus)" />
          </el-form-item>
          <el-form-item label="紧急联系人" prop="emergencyContact">
            <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人" :spellcheck="false"
              :readonly="[0, 2].includes(competitionStatus)" />
          </el-form-item>
          <el-form-item label="联系方式" prop="emergencyNum">
            <el-input v-model="form.emergencyNum" placeholder="请输入联系方式" :spellcheck="false"
              :readonly="[0, 2].includes(competitionStatus)" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="card handle" v-if="competitionStatus == 1">
      <div class="btn" @click="submit">{{ recordId ? '修改' : '提交' }}</div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/competitionsManger/index.js';
import dayjs from 'dayjs';
import { mapGetters } from 'vuex';

export default {
  name: 'ActivityRegisterRegister',
  data() {
    return {
      dataLoading: false,
      recordId: null,
      competitionId: '',
      competitionStatus: null,
      form: {
        name: '',
        idCard: '',
        phone: '',
        emergencyContact: '',
        emergencyNum: '',
        status: '成功',
      },
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        // gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号',
            trigger: 'blur',
          },
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        emergencyNum: [
          {
            pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
            message: '请输入正确的联系方式',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(['userId']),
  },
  created() {
    if (this.$route?.query?.competitionId) this.competitionId = this.$route.query.competitionId;
    if (this.$route?.query?.status !== '') this.competitionStatus = this.$route.query.status;
    if (this.$route?.query?.recordId) this.recordId = this.$route.query.recordId;
    if (this.recordId) this.getData();
  },
  methods: {
    getData() {
      this.dataLoading = true;
      api.getCompetitionsRecordInfo(this.recordId).then(({ data }) => {
        Object.keys(this.form).forEach((key) => {
          if (data[key] !== undefined) this.form[key] = data[key];
        });
        this.dataLoading = false;
      });
    },
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;
        let funcName = '';
        if (this.recordId) {
          funcName = 'editCompetitionsRecord';
          this.form.id = this.recordId;
        } else {
          funcName = 'addCompetitionsRecord';
        }
        await this.$confirm(`是否确定${this.recordId ? '修改' : '提交'}报名信息？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const res = await api[funcName]({
          competitionId: this.competitionId,
          ...this.form,
          registrationTime: dayjs().format('YYYY-MM-DD'),
        });
        this.$message({ message: res.msg, type: 'success' });
        this.$router.back();
        // this.$router.push('/activityRegister/index');
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 135px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

.card {
  border-radius: 10px;
  padding: 15px;
  background-color: #fff;
  margin-bottom: 15px;

  &.handle {
    flex-shrink: 0;
    margin-bottom: 0px;
    display: flex;
    justify-content: end;

    .btn {
      padding: 7px 30px;
      border-radius: 20px;
      background-color: #165dff;
      color: #fff;
      cursor: pointer;
    }
  }
}

.form-box {
  width: 100%;

  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 20px;
      padding: 5px 10px;
      border-radius: 10px;
      background-color: #fff;

      .el-form-item__error {
        padding-top: 8px;
      }

      .el-input__inner {
        border: none;
      }

      .el-radio {
        margin-left: 20px;
      }
    }
  }
}
</style>
